<template>
	<!-- 	<view class="page" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
		<c-nav-bar :title="title"></c-nav-bar> -->

	<view class="page">
		<customNavBar1 :title="title" style="color: #111 !important"></customNavBar1>

		<view class="hander-one" :style="{ 'padding-top': mt + 'px' }">
			<view class="cardList">
				<view class="card-title">
					<view class="card-title-left">
						{{ itemList.name }}
					</view>
					<view class="card-title-right" @click="navBack()">
						<view class="card-title-left-text"> 房型详情 </view>
						<view class="image">
							<image src="https://i.ringzle.com/file/20240123/3cf0f794b73d4cf691371408fbd3b5e3.png"
								mode="aspectFill">
							</image>
						</view>
					</view>
				</view>
				<!-- 	<view class="card-text">
					{{itemList.bedData[0].num}}张·{{itemList.bedData[0].category}}·{{itemList.bedData[0].size}}·{{itemList.bedData[0].roomState==0?'不含早':' 含早餐'}}
				</view> -->
				<view class="card-text" v-if="itemList&&itemList.bedData&&itemList.bedData.length > 1">
					{{ itemList.area }}m² · {{ itemList.bedData[0].num }}张{{
            itemList.bedData[0].category
          }}
					· {{ itemList.bedData[1].num }}张{{
            itemList.bedData[1].category
          }}
					·{{ itemList.breakfastType == 0 ? "不含早" : "含早" }}
				</view>
				<view class="card-text" v-else-if="itemList&&itemList.bedData&&itemList.bedData.length == 1">
					{{ itemList.area }}m² ·{{ itemList.bedData[0].num }}张{{
            itemList.bedData[0].category
          }}
					·{{ itemList.breakfastType == 0 ? "不含早" : "含早" }}
				</view>
				<view class="card-text" v-else-if="itemList&&itemList.bedData&&itemList.bedData.length == 0">
				</view>
				<view class="card-text-bottom">
					<view class="image" style="margin: 0 5rpx 0 0">
						<image src="https://i.ringzle.com/file/20240129/72f8180e220942ad8c7b08ebca8ae61e.png" mode="">
						</image>
					</view>
					<view class="card-text-bottom-text">
						<text>{{
              RoomsList.refundRule == 1
                ? "不可取消"
                : RoomsList.refundRule == 2
                ? "免费取消"
                : "限时取消"
            }}</text>
					</view>
					<view class="image" style="margin: 0 5rpx 0 17rpx">
						<image src="https://i.ringzle.com/file/20240129/5eece76d11a84795a392b022c8b0bcc6.png" mode="">
						</image>
					</view>
					<view class="card-text-bottom-text"> 立即确认 </view>
				</view>
				<view class="card-text-bottom" v-if="RoomsList.refundRule == 3"
					style="color: #999999; margin-top: 10rpx">
					<view v-if="RoomsList.deductType == 1">
						<!-- 2024-04-15 18:00:00点前免费取消。逾期将扣除全额房费。 -->
						{{ RoomsList.cancelDay }}
						{{ RoomsList.cancelTime }}点前免费取消。若未入住将收取您首晚房费。
					</view>
					<view v-if="RoomsList.deductType == 2">
						{{ RoomsList.cancelDay }}
						{{ RoomsList.cancelTime }}点前免费取消。若未入住将收取您全额房费。
					</view>
					<view v-if="RoomsList.deductType == 3">
						{{ RoomsList.cancelDay }}
						{{ RoomsList.cancelTime }}点前免费取消。若未入住将收取您房费的{{
              deductRatio
            }}%。
					</view>
				</view>
			</view>
		</view>

		<view style="background: #f5f8fa; padding-bottom: 160rpx">
			<view class="two-center-two">
				<view class="lfet">
					<view class="lfet-one"> 入住日期 </view>
					<view class="lfet-two">
						<text class="lfet-two-one">{{ arriveTime }}月{{ arriveTimes }}日</text>
						<text class="lfet-two-two">{{ departWeek }}</text>
					</view>
				</view>
				<view class="content">
					<view class="content-one"> </view>
					<view class="content-two"> 共{{ count }}晚 </view>
				</view>
				<view class="right">
					<view class="right-one"> 离店日期 </view>
					<view class="right-two">
						<text class="right-two-one">{{ leaveTime }}月{{ leaveTimes }}日</text>
						<text class="right-two-two">{{ departWeeks }}</text>
					</view>
				</view>
			</view>

			<view class="book">
				<view class="tit">入住信息</view>

				<view class="from">
					<view class="num">
						<text style="width: 180rpx">房间数</text>
						<text v-if="valStatus" style="
                font-size: 30rpx;
                color: #333333;
                font-weight: bold;
                margin-left: -150rpx;
              ">
							最多可定{{ checkInRooms }}套
						</text>
						<u-number-box v-model="fromList.checkInRooms" min="1" :max="checkInRooms" @overlimit="valChange"
							@change="valChange">
							<view slot="minus" class="minus">
								<!-- <u-icon name="minus" size="22"></u-icon> -->
								<image src="https://i.ringzle.com/file/20240418/e8e77fead6f1470c9cea00291d1e4dab.png"
									mode=""></image>
							</view>
							<text slot="input" class="input">{{
                fromList.checkInRooms
              }}</text>
							<view slot="plus" class="plus">
								<!-- <u-icon name="plus" color="#fff" size="22"></u-icon> -->
								<image src="https://i.ringzle.com/file/20240418/09449e9f30dd4d8bb49789253a26a018.png"
									mode=""></image>
							</view>
						</u-number-box>
					</view>
					<view class="item">
						<view><text class="req">*</text>住客姓名</view>
						<view>
							<input type="text" class="u-ipt" v-model="fromList.guestName" placeholder="请填写姓名" />
						</view>
						<!-- 		<view class="image">
							<image src="https://i.ringzle.com/file/20240129/1d18e38a0b354838b3d6e3dc8afd58f0.png"
								mode="aspectFill"></image>
						</view> -->
					</view>
					<view class="item">
						<view><text class="req">*</text>联系手机</view>
						<view>
							<input type="text" class="u-ipt" placeholder="请输入手机号码" v-model="fromList.guestPhone" />
						</view>
					</view>
					<view class="item">
						<view>备注</view>
						<view>
							<input type="text" class="u-ipt" placeholder="请输入备注" v-model="fromList.remarks" />
						</view>
					</view>
				</view>
			</view>
			<view class="cellBox" @click="couponList">
				<view class="cellBox-left">
					<text slot="icon" class="icon">券</text>
					<view slot="title" class="title">
						<text>优惠券</text>
					</view>
				</view>
				<view class="cellBox-right">
					<view class="cellBox-text">
						<text v-if="coupon.length==0">暂未选择优惠券</text>
						<text v-else>{{coupon.name}}</text>
					</view>
					<view class="image">
						<image src="https://i.ringzle.com/file/20240123/3cf0f794b73d4cf691371408fbd3b5e3.png"
							mode="aspectFill">
						</image>
					</view>
				</view>
			</view>

			<view class="agree">
				<text>点击“提交订单”则表示您已阅读同意并接受</text>
				<text @tap="showXy">《游嵊泗民宿预订条款》</text>
				<text></text>
			</view>
			<!-- 预订协议 -->
			<view class="ydxy">
				<u-modal :show="showAgree" :title="titles" confirmText="已知晓" confirmColor="#007A69" @confirm="confirm">
					<view class="slot-content">
						<rich-text :nodes="content"></rich-text>
					</view>
				</u-modal>
			</view>

			<!-- 提交栏 -->
			<view class="bottom">
				<view class="b_left">
					<text>总价</text>
					<view>
						<span class="b_span1">￥</span>
						<span class="b_span" v-if="coupon.length==0">{{ Math.round(price*100)/100}}</span>
						<span class="b_span" v-else-if="coupon.length!=0 && price>coupon.price">{{ Math.round((price- coupon.price)*100)/100}}</span>
						<span class="b_span" v-else-if="coupon.length!=0 && price<=coupon.price">0.01</span>
					</view>
				</view>
				<view class="b_right">
					<view class="br_left" @tap="feeShow = true">
						<text>明细</text>
						<image src="@/static/index/steamerTicket/icon_xjt.jpg" mode=""></image>
					</view>
					<view class="br_right" @tap="goPay">
						<!-- {{goback?'订票':'去支付'}} -->
						提交订单
					</view>
				</view>
			</view>
			<!-- 费用明细 -->

			<u-popup :show="feeShow" @close="feeShow = false">
				<view class="details">
					<view class="title">
						<text>费用明细</text>
						<image src="@/static/index/steamerTicket/icon_close.png" @tap="feeShow = false"></image>
					</view>
					<view>
						<view class="total">
							<text>合计</text>
							<view>￥{{ price}}</view>
						</view>
						<view class="total">
							<text>{{itemList.name }}</text>
							<!-- <view>￥{{ roomAmount }}×{{checkInRooms}}间</view> -->
							<view>
								<view v-for="(item,index) in detailRoomPriceList" :key="index">
									￥{{ item.price }}×{{item.rooms}}间
								</view>
							</view>
						</view>
						<view class="total" v-if="coupon.length!=0">
							<text>优惠券抵扣</text>
							<!-- <view>￥{{ roomAmount }}×{{checkInRooms}}间</view> -->
							<view>
								￥-{{coupon.price}}
							</view>
						</view>
					</view>

					<view class="bottom">
						<view class="b_left">
							<text>总价</text>
							<view>
								<span class="b_span1">￥</span>
								<span class="b_span" v-if="coupon.length==0">{{ Math.round(price*100)/100}}</span>
								<span class="b_span" v-else-if="coupon.length!=0 && price>coupon.price">{{ Math.round((price - coupon.price)*100 )/100}}</span>
								<span class="b_span" v-else-if="coupon.length!=0 && price<=coupon.price">0.01</span>
							</view>
						</view>
						<view class="b_right">
							<view class="br_left" @tap="detailsShow = false">
								<text>明细</text>
								<image src="@/static/index/steamerTicket/icon_xjt.jpg" mode=""></image>
							</view>
							<view class="br_right" @tap="goPay"> 提交订单 </view>
						</view>
					</view>
				</view>
			</u-popup>
			<!-- 支付弹框 -->
			<WechatPay ref="wxPay" @confirmPay="toPay" @cancelPay="cancelPay"></WechatPay>

			<u-popup :show="show" :round="10" closeIconPos="top-right" closeable mode="bottom" @close="close"
				@open="open">
				<view class="pop-pop">
					<view class="pop-img">
						<u-swiper :list="DetailsedList.picList" @change="(e) => (currentNum = e.current)"
							:autoplay="false" indicatorStyle="right: 20px" height="480rpx">
							<view slot="indicator" class="indicator-num">
								<text class="indicator-num__text">{{ currentNum + 1 }}/{{ picListlength }}</text>
							</view>·
						</u-swiper>
					</view>

					<view class="pop-titles">
						{{ DetailsedList.name }}
					</view>

					<view class="pop-grid">
						<view class="grid" v-if="DetailsedList.area">
							<image src="https://i.ringzle.com/file/20240416/1bf5ea857dc745d3b50633a1a5b0443b.png"
								mode="">
							</image>
							<view class=""> 整套房屋{{ DetailsedList.area }}m² </view>
						</view>
						<view class="grid">
							<image src="https://i.ringzle.com/file/20240416/cb90edc6fa0f4fd8be5a1609b4c15a23.png"
								mode="">
							</image>
							<!-- 		<view class="">
								可住{{ DetailsedList.checkinGuests }}成人{{DetailsedList.childCheckinNums}}儿童
							</view> -->
							<view class="">
								可住{{ DetailsedList.checkinGuests }}成人
								<text v-if="DetailsedList.childCheckinNums != 0">
									{{ DetailsedList.childCheckinNums }}儿童</text>
							</view>
						</view>
						<view class="grid" v-if="DetailsedList&&DetailsedList.bedData">
							<image v-if="DetailsedList.bedData.length != 0"
								src="https://i.ringzle.com/file/20240416/ffaa804b4b7d4b55aa3cf489b76521cf.png" mode="">
							</image>
							<view v-if="DetailsedList.bedData.length == 1">
								{{ DetailsedList.bedData[0].num }}张{{DetailsedList.bedData[0].category}}
								{{ DetailsedList.bedData[0].size }}
							</view>
							<view v-else-if="DetailsedList.bedData.length > 1">
								{{ DetailsedList.bedData[0].num }}张{{DetailsedList.bedData[0].category }},
								{{ DetailsedList.bedData[1].num }}张{{DetailsedList.bedData[1].category}}
							</view>
							<view v-else-if="DetailsedList.bedData.length == 0"></view>
						</view>
						<view class="yuefen" v-for="(item, index) in DetailsedList.bedData" :key="index">
							<view class="yunying11">
								{{ item.category }}
							</view>
							<view class="yunying11">
								{{ item.size }}
							</view>
							<view class="yunying11"> {{ item.num }}张 </view>
						</view>
					</view>

					<view style="background-color: #f5f8fa; width: 100%; height: 20rpx"></view>

					<view class="pop-text">
						<view class="pop-titled" v-if="DetailsedList.bathroomWith != ''">
							<view class="pop-title-one"> 房间设施 </view>
						</view>
						<view class="pop-list" v-if="DetailsedList.bathroomWith != ''">
							<view class="left"> 卫浴 </view>
							<view class="right">
								<view class="right-item" v-for="(item, index) in DetailsedList.bathroomWith"
									:key="index">
									<view class="image" v-if="item">
										<image
											src="https://i.ringzle.com/file/20240130/ee12f90f29184532a0f74d00807941ab.png"
											mode="aspectFill"></image>
									</view>
									<view class="text" v-if="item">
										{{ item }}
									</view>
								</view>
							</view>
						</view>
						<view class="pop-list" v-if="DetailsedList.homeWith != ''">
							<view class="left"> 居家 </view>
							<view class="right">
								<view class="right-item" v-for="(item, index) in DetailsedList.homeWith" :key="index">
									<view class="image" v-if="item">
										<image
											src="https://i.ringzle.com/file/20240130/ee12f90f29184532a0f74d00807941ab.png"
											mode="aspectFill"></image>
									</view>
									<view class="text" v-if="item">
										{{ item }}
									</view>
								</view>
							</view>
						</view>
						<view class="pop-list" v-if="DetailsedList.hotelRecreation != ''">
							<view class="left"> 娱乐 </view>
							<view class="right">
								<view class="right-item" v-for="(item, index) in DetailsedList.hotelRecreation"
									:key="index">
									<view class="image" v-if="item">
										<image
											src="https://i.ringzle.com/file/20240130/ee12f90f29184532a0f74d00807941ab.png"
											mode="aspectFill"></image>
									</view>
									<view class="text" v-if="item">
										{{ item }}
									</view>
								</view>
							</view>
						</view>
						<view class="pop-list" v-if="DetailsedList.hotelRoomService != ''">
							<view class="left"> 客房服务 </view>
							<view class="right">
								<view class="right-item" v-for="(item, index) in DetailsedList.hotelRoomService"
									:key="index">
									<view class="image" v-if="item">
										<image
											src="https://i.ringzle.com/file/20240130/ee12f90f29184532a0f74d00807941ab.png"
											mode="aspectFill"></image>
									</view>
									<view class="text" v-if="item">
										{{ item }}
									</view>
								</view>
							</view>
						</view>
						<view class="pop-list" v-if="DetailsedList.hotelSecurity != ''">
							<view class="left"> 安全 </view>
							<view class="right">
								<view class="right-item" v-for="(item, index) in DetailsedList.hotelSecurity"
									:key="index">
									<view class="image" v-if="item">
										<image
											src="https://i.ringzle.com/file/20240130/ee12f90f29184532a0f74d00807941ab.png"
											mode="aspectFill"></image>
									</view>
									<view class="text" v-if="item">
										{{ item }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>

			<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
		</view>
	</view>
</template>

<script>
	// import customNavBar1 from '@/compoments/uNavBar1/index.vue'
	import customNavBar1 from "@/compoments/uNavBar1/index2.vue";
	import GetPhoneNumber from "@/compoments/Getphonenumber/index.vue";
	import WechatPay from '@/compoments/wechatPay/index.vue'
	export default {
		components: {
			GetPhoneNumber,
			customNavBar1,
			WechatPay
		},
		data() {
			return {
				title: "填写订单",
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				fromList: {
					guestName: "",
					guestPhone: JSON.parse(uni.getStorageSync("userInfo")).mobile,
					homestayId: "",
					houseBaseId: "",
					leaveDate: "",
					arriveDate: "",
					checkInRooms: 1,
					remarks: "",
					openId: "",
					roomAmount: 0,
					// checkInTimeStart:'',
					// checkOutTime:'',
				},
				values: 1,
				agree: false,
				value: 1,
				tel: "",
				date: [1, 2, 3],
				addPersonShow: false,
				checkedper: [],
				feeShow: false,
				fromData: {
					arriveDate: "",
					houseBaseId: "",
					leaveDate: "",
					homestayId: "",
				},
				RoomsList: {},
				arriveTime: 10,
				arriveTimes: 24,
				leaveTime: 10,
				leaveTimes: 25,
				count: 1,
				checkInRooms: 1, //预订房间数
				roomAmount: "", //到达-离开的 1间房的价格
				orderId: "",
				price: 0,
				goback: false,
				mxList: [],
				introduction: "",
				itemList: {},
				name: "",
				departWeek: "",
				departWeeks: "",
				titles: "游嵊泗民宿预订条款",
				content: `
					<div>
						<p style="font-size:14px;line-height:21px;">第一条 特别提示</p>
						<p style="font-size:14px;line-height:21px;">游嵊泗小程序由舟山智游千岛公司运营，涉及具体产品服务的，将由有资质的服务商提供舟山智游千岛公司(以下简称“本公司“)通过游嵊泗小程序(以下简称“本平台“)为用户提供预订住宿服务，住宿服务由住宿服务提供方(酒店旅舍等)提供。</p><br/>
						<p style="font-size:14px;line-height:21px;">在通过游嵊泗小程序向本公司预订开始前，请仔细阅读本须知，本须知及产品页面中的重要条款作为本公司与预订人(下方所称“您“，代以“您“统称入住人和预订人应知晓和遵守的内容)双方协议的重要内容。当您勾选同意并进一步预订本产品时，表明您仔细阅读并接受协议的所有条款。本公司仅负责提供网络预订服务，展示的住宿产品资源由住宿服务提供方或住宿服务提供方的代理商(以下合称“酒店或供应商”)提供，每个产品编号对应住宿产品提供方唯一资源，具体住宿服务由住宿服务提供方负责。</p><br/>
						<p style="font-size:14px;line-height:21px;">第二条 预订注意事项公司</p>
						<p style="font-size:14px;line-height:21px;">1.平台展示的酒店价格包含酒店但不含酒店内消费的其他费用。</p><br/>
						<p style="font-size:14px;line-height:21px;">2.您提出的特殊需求住宿服务提供方不能保证实现，我们会及时将确认情况反馈给您。</p><br/>
						<p style="font-size:14px;line-height:21px;">3.预订订单需等酒店或供应商确认后生效，订单确认结果以短信、邮件通知为准。</p><br/>
						<p style="font-size:14px;line-height:21px;">4.请您在填写订单时，务必留下准确的联系方式，以便客服与您联系预订相关事宜。</p><br/>
						<p style="font-size:14px;line-height:21px;">5.对于任何形式的不正当行为或可疑用户账号 (包括但不限于扰乱系统、网络攻击、刷单、倒卖/转卖)，本公司有权取消您的订单，终止您预订资格，并扣除订单相关费用(最高可为订单金额的100%)。如因您的行为给本公司或平台造成损失，同时应当承担赔偿责任。</p><br/>
						<p style="font-size:14px;line-height:21px;">6.预订人需如实填写实际入住客人姓名，若预订信息中的住客姓名与实际入住客人不一致，酒店或供应商有权拒绝接待或取消该订单，且无需承担责任。</p><br/>
						<p style="font-size:14px;line-height:21px;">7.恶意围房/占房:同一自然人及其相关人(包括但不限于同账号、同一身份证号等)，不可集中批量地围房/占房，破坏平台正常的经营秩序或侵害其他商家、消费者合法权益。</p><br/>
						<p style="font-size:14px;line-height:21px;">8.如实际住客中包含未成年人的，入住客人应根据酒店要求提供父母或者其他监护人的联系方式、与同住人员身份关系等情况。如不配合提供，酒店有权拒绝接待或向公安机关报告可疑情况。</p><br/>
						<p style="font-size:14px;line-height:21px;">第三条 更改或取消已生效订单</p>
						<p style="font-size:14px;line-height:21px;">订单生效的定义:产品预订成功后，本公司通过平台或短信给您发送确认信息，该订单即生效。</p><br/>
						<p style="font-size:14px;line-height:21px;">您主动更改或取消已生效订单订单生效后，您可以在入住前通知本平台更改或取消您所做预订，并遵循预订流程中已展示的取消政策，且经平台或供应商确认后方可取消/更改，更改和取消订单可能依照政策产生相应费用。</p><br/>
						<p style="font-size:14px;line-height:21px;">第四条 不可抗力</p>
						<p style="font-size:14px;line-height:21px;">因不可抗力(包括地震、台风、雷击、水灾、火灾等自然原因，及战争、政府行为、黑客攻击、电信部门技术管制等原因)不能履行或不能继续履行已生效订单约定内容的，本公司和您均不承担违约责任，但法律另有规定的除外。</p><br/>
						<p style="font-size:14px;line-height:21px;">第五条 其它</p>
						<p style="font-size:14px;line-height:21px;">本须知未尽的其他事项，由双方协商解决。</p>
					</div>
				`,
				showAgree: false,
				checkInTimeStart: "",
				checkOutTime: "",
				valStatus: false,
				cancelTime: null,
				deductRatio: null,
				DetailsedList: [],
				show: false,
				picListlength: "",
				currentNum: 0,
				roomInfos: [],
				roomIdList: [],
				detailRoomPriceList: [],
				coupon:[]
			};
		},
		onShow(){
			let that = this
			uni.$on('updateData',function(data){
				console.log(data);
				if(data){
					that.coupon = data
				}else{
					that.coupon = []
				}
				
			})
				
		},
		onLoad(e) {
			this.$login().then((res) => {
				if (res !== 0) {
					this.$refs["phoneNumber"].show = true;
				}
			});
			let option = JSON.parse(decodeURIComponent(e.list));
			this.introduction = option.introduction;
			this.itemList = option.item;

			this.fromData.arriveDate = option.arriveDate;
			this.fromData.leaveDate = option.leaveDate;
			this.fromData.homestayId = option.homestayId;
			this.fromData.houseBaseId = option.houseBaseId;
			this.name = option.name;

			this.arriveTime = option.arriveDate.slice(5, 7); // 截取第一个字符
			this.arriveTimes = option.arriveDate.slice(8, 10); // 截取第一个字符

			this.leaveTime = option.leaveDate.slice(5, 7); // 截取第一个字符
			this.leaveTimes = option.leaveDate.slice(8, 10); // 截取第一个字符
			// this.count = Math.abs(this.leaveTimes - this.arriveTimes);
			this.count = option.count;

			// this.valChange()

			this.fromList.arriveDate = option.arriveDate;
			this.checkInTimeStart = option.checkinTime;
			this.checkOutTime = option.checkoutTime;
			this.fromList.leaveDate = option.leaveDate;

			this.fromList.homestayId = option.homestayId;
			this.fromList.houseBaseId = option.houseBaseId;

			let week = wx.getStorageSync("week");

			this.departWeek = week.departWeek;
			this.departWeeks = week.departWeeks;

			try {
				var data = wx.getStorageSync("userInfo"); // 替换成你要获取的数据的键名
				if (data) {
					// 数据获取成功
					this.fromList.openId = JSON.parse(data).openId;
				} else {
					// 未找到对应数据
				}
			} catch (e) {
				// 获取数据时出错
			}
			this.getRoomsList();
			this.getDetailsed(option.houseBaseId);
		},

		methods: {
			couponList(){
				uni.navigateTo({
				    url: `/pagesMy/coupon/useList?type=2&price=${this.roomAmount}`
				});
			},
			open() {},
			getDetailsed(id) {
				this.$api.get(`/api/hotel/getHouseDetail/${id}`).then((res) => {
					this.DetailsedList = res.data.data;
					this.picListlength = res.data.data.picList.length;
				});
			},

			// 返回上一页
			navBack() {
				// console.log("是否触发");
				// uni.navigateBack({
				// 	delta: 1
				// }); // 返回上一页
				this.show = true;
			},
			getRoomsList() {
				this.$api
					.post("/api/hotel/getReserveRooms", this.fromData)
					.then((res) => {
						this.checkInRooms = res.data.data.checkInRooms;
						this.cancelTime = res.data.data.cancelTime;
						this.deductRatio = res.data.data.deductRatio;
						// checkinTime
						// checkoutTime
						// this.checkInTimeStart = res.data.data.checkInTimeStart;
						// this.checkOutTime = res.data.data.checkOutTime;
						// this.price = res.data.data.roomAmount;
						this.roomInfos = res.data.data.roomInfos;
						if (this.roomInfos.length > 0) {
							this.price = this.roomInfos[0].roomAmount || 0;
							this.roomIdList = [this.roomInfos[0].roomIds];
						}
						// this.roomAmount = res.data.data.roomAmount;
						this.roomAmount = this.price;
						// this.fromList.roomAmount = res.data.data.roomAmount;
						this.fromList.roomAmount = this.price;
						this.detailRoomPriceList = [{
							price: this.price,
							rooms: 1
						}];


						this.RoomsList = res.data.data;
						this.fromList.arriveDate =
							this.fromList.arriveDate + " " + this.checkInTimeStart;
						this.fromList.leaveDate =
							this.fromList.leaveDate + " " + this.checkOutTime;
					});
			},
			// 房间数量
			valChange(e) {
				this.coupon = []
				this.valStatus = true;
				if (this.checkInRooms != 1) {
					if (e.value != undefined) {
						if (this.checkInRooms >= e.value) {
							let price = 0;
							let ids = [];
							for (let i = 0; i < e.value; i++) {
								price += this.roomInfos[i].roomAmount;
								ids.push(this.roomInfos[i].roomIds);
							}
							this.price = price;
							this.roomIdList = ids;
							this.fromList.roomAmount = this.price;
							this.dealDetailRoomPrice(e.value);
						} else {
							this.$showToast("没有多余房间");
						}
					} else {
						if (e === "minus") return this.$showToast("最少预定一套");
						else return this.$showToast("没有多余房间");
					}
				} else {
					this.$showToast("没有多余房间");
				}
			},
			//计算明细：房间数和价格
			dealDetailRoomPrice(len) {
				let temp = this.roomInfos.slice(0, len);
				let keys = [];
				temp.forEach(t => {
					if (!keys.includes(t.roomAmount)) keys.push(t.roomAmount)
				})

				let newArr = [];
				keys.forEach(k => {
					let rooms = temp.filter(t => t.roomAmount == k).length;
					newArr.push({
						price: k,
						rooms
					})
				})
				this.detailRoomPriceList = newArr;
			},
			//登录成功后处理事件
			loginSuccess(res) {
				if (this.lsKey == "getPassenger") this.toGetPassengers();
				if (this.lsKey == "toPay") this.confrimPay();
			},

			// 协议
			showXy() {
				this.showAgree = true;
			},
			// 已知晓
			confirm() {
				this.agree = true;
				this.showAgree = false;
			},

			// 提交订单
			goPay() {
				if (!this.fromList.guestName) return this.$showToast("请填写联系人姓名");
				if (!this.$reg.mobile(this.fromList.guestPhone))
					return this.$showToast("请填写正确的联系人手机号");

				let newData = JSON.parse(JSON.stringify(this.fromList));
				newData.guestName = this.$aesTm.encrypt(newData.guestName);
				newData.guestPhone = this.$aesTm.encrypt(newData.guestPhone);
				newData.roomIdList = this.roomIdList;
				newData.discountCouponUserId = this.coupon.id
				this.$api.post("/api/hotel/placeOrder", newData).then((res) => {
					if (res.data.code === 0) {
						this.$refs.wxPay.payShow = true;
						this.orderId = res.data.data;
					} else if (res.data.code === 500) {
						this.$showModal(res.data.msg);
					}
				});
			},
			// 确定支付
			toPay() {
				this.lsKey = "toPay";
				this.confrimPay();
			},
			cancelPay() {
				uni.redirectTo({
					url: '/pagesTrip/hotel/orderDetails/index?orderId=' + this.orderId
				})
			},
			confrimPay() {
				var list = JSON.stringify({
					// price: this.price,
					orderId: this.orderId,
				});

				this.$api
					.post(
						"/order/icbc/createOrder", {
							orderCode: this.orderId,
							tradeType: "JSAPI",
							openId: JSON.parse(uni.getStorageSync("userInfo")).openId,
						},
						false
					)
					.then((res) => {
						if (res.statusCode == 200 && res.data != null) {
							this.$refs.wxPay.payShow = false;
							this.$wxPay(res.data).then((result) => {
								uni.redirectTo({
									url: "/pagesTrip/hotel/paymentSuccess/index?list=" + list,
								});
							});
						}
					});
			},
			createOrder() {
				// if (this.passengerList.length === 0) return this.$showToast('请添加乘客');
				// if (!this.agree) return this.$showToast('请选择预订协议');
				if (!this.fromList.guestName) return this.$showToast("请填写联系人姓名");
				if (!this.$reg.mobile(this.fromList.guestPhone))
					return this.$showToast("请填写正确的联系人手机号");

				this.$login().then((res) => {
					if (res === 0) {
						let params = JSON.parse(JSON.stringify(this.item));
						delete params.cangInfo;
						params.contactNum = this.phone;
						params.linkPerson = this.name;
						params.linkPhone = this.phone;
						params.sailDate = new Date(params.sailDate).Format("yyyy-MM-dd");
						let teTime = new Date().setMinutes(new Date().getMinutes() + 5);
						params.expireTime = new Date(teTime).Format("yyyy-MM-dd hh:mm:ss");
						params.foreOrderItemReqs = [];
						params.totalFee = this.price;
						params.totalPayFee = this.price;
						params.openId = JSON.parse(uni.getStorageSync("userInfo")).openId;
						this.passengerList.forEach((d) => {
							params.foreOrderItemReqs.push({
								passName: d.name,
								priceType: d.personType,
								credentialNum: d.card,
								realFee: d.personType == 1 ?
									this.item.cangInfo.totalPrice : this.item.cangInfo.halfPrice,
								passId: 193,
								freeChildCount: d.childs,
								ticketFee: d.personType == 1 ?
									this.item.cangInfo.totalPrice : this.item.cangInfo.halfPrice,
								seatClassName: this.item.cangInfo.className,
								credentialType: d.cardType,
								seatClass: this.item.cangInfo.classNum,
								isLocal: 0,
								plateNum: "",
								"ticPrice": this.item.cangInfo.ticPrice || ''
							});
						});

						this.$api
							.post("/travel/api/ship/order/holding/save", params)
							.then((res) => {
								if (res.data.code === 0) {
									this.$refs.wxPay.payShow = true;
									this.orderId = res.data.data;
								} else this.$showModal(res.data.msg);
							});
					} else this.$refs["phoneNumber"].show = true;
				});
			},
			confirmAddper() {
				this.close();
			},
			close() {
				this.$set(this, "addPersonShow", false);
				this.show = false;
			},
			close2() {
				this.$set(this, "feeShow", false);
			},
			minus(index) {
				this.checkedper.splice(index, 1);
			},
		},
	};
</script>
<style lang="scss">
	::v-deep .ydxy .u-popup__content {
		max-height: 80%;
		overflow: auto !important;
		border-radius: 32rpx !important;
	}

	.indicator-num {
		padding: 4rpx 16rpx;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 16rpx;
		width: fit-content;
		// @include flex;
		justify-content: center;
		color: #FFFFFF;
	}

	.u-popup__content__close--top-right {
		width: 42rpx !important;
		height: 42rpx !important;
		border-radius: 50rpx !important;
		background-color: rgba(0, 0, 0, 0.2) !important;

		.uicon-close {
			margin-top: 13rpx !important;
			color: #fff !important;
			font-size: 30rpx !important;
			margin-left: 6rpx !important;
		}
	}

	.req {
		color: #f44;
	}

	.u-popup__content {
		border-radius: 32rpx 32rpx 0 0 !important;
	}

	.pop-pop {
		box-sizing: border-box;
		height: 70vh;
		// margin: 24rpx;
		overflow: auto;
		border-radius: 32rpx 32rpx 0 0;
		// padding: 30rpx;

		.pop-img {
			width: 100% !important;
			height: 480rpx !important;
			border-radius: 32rpx 32rpx 0 0;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.pop-titles {
			// text-align: center;
			// margin: 0 40rpx 20rpx;
			margin: 36rpx 30rpx;
			font-size: 36rpx;
			color: #111111;
			font-weight: bold;
		}

		.pop-grid {
			display: flex;
			flex-wrap: wrap;
			padding: 0 30rpx 30rpx;

			.grid {
				width: 49%;
				height: 30rpx;
				display: flex;
				align-items: center;
				margin: 16rpx 0;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				&>view {
					margin: 0 24rpx;
					font-size: 24rpx;
					color: #111111;
					font-weight: bold;
				}
			}

			.yuefen {
				margin-top: 36rpx;
				box-sizing: border-box;
				width: 100%;
				height: 80rpx;
				display: flex;
			}

			.yunying11 {
				box-sizing: border-box;
				width: 33.33%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				border: 1px solid #e6e6e6;
			}
		}

		.pop-text {
			padding: 30rpx;

			.pop-titled {
				// text-align: center;
				// margin: 0 40rpx 20rpx;

				.pop-title-one {
					// margin: 40rpx 30rpx 12rpx;
					font-size: 36rpx;
					color: #111111;
					font-weight: bold;
				}

				.pop-title-two {
					// margin: 12rpx 0 15rpx;
					margin: 0 30rpx;
					display: flex;
					align-items: center;

					.title-one-image {
						width: 20rpx;
						height: 22rpx;
						margin: 0 6rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.title-one-title {
						margin-top: 6rpx;
						font-size: 20rpx;
						font-weight: Regular;
						color: #aaaaaa;
					}
				}
			}

			.pop-list {
				display: flex;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #efefef;

				.left {
					font-size: 26rpx;
					color: #111111;
					font-weight: bold;
					width: 16%;
				}

				.right {
					width: 90%;
					display: flex;
					flex-wrap: wrap;
					text-align: center;
					align-items: center;

					.right-item {
						display: flex;
						width: 33%;
						margin-bottom: 20rpx;
						align-items: center;

						.image {
							width: 28rpx;
							height: 28rpx;
							margin: 0 10rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.text {
							font-size: 24rpx;
							color: #333;
							font-weight: Regular;
						}
					}
				}
			}
		}
	}

	.u-navbar__content__title {
		color: #111111 !important;
	}

	.u-ipt {
		border: none;
		outline: none;
		// text-align: right;

		&::placeholder {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #aaaaaa;
		}
	}

	.item {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #efefef;
		padding: 5rpx 0;

		&>view {
			margin: 24rpx 0;

			&:first-child {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 500;
				color: #111111;
				line-height: 40rpx;
				width: 180rpx;
			}

			&:nth-child(2) {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: Regular;
				color: #111111;
				line-height: 42rpx;
				width: calc(100% - 216rpx);

				input {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					// font-weight: 400;
					color: #111111;
					font-weight: Regular;
					outline: none;
					border: none;
					width: 100%;

					&::placeholder {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: Regular !important;
						color: #aaaaaa;
						line-height: 37rpx;
					}
				}
			}

			&:nth-child(3) {
				width: 44rpx;
				height: 44rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>

<style scoped lang="scss">
	.page {
		background-color: #f5f8fa;
		height: 100%;
	}

	.page-one {
		box-sizing: border-box;
		// padding: 24rpx;
		margin-bottom: 20rpx;
		background: #fff;
		border-radius: 16rpx;
	}

	// 费用明细
	.feeDetail {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		height: 680rpx;
		overflow: auto;
		padding: 50rpx 30rpx;
		border-bottom: 1px solid #eee;

		.tit {
			display: flex;
			justify-content: space-between;
			margin-bottom: 60rpx;

			text {
				font-size: 36rpx;
				color: #333;
			}
		}

		.list {
			.top {
				text {
					vertical-align: middle;

					&:nth-child(1) {
						font-size: 30rpx;
					}

					&:nth-child(2) {
						width: 300rpx;
						text-align: right;
						color: #ff4141;
					}

					&:nth-child(3) {
						font-size: 36rpx;
						color: #ff4141;
					}
				}
			}

			.time {
				display: inline-block;
				font-size: 24rpx;
				color: #808080;
				margin-top: 20rpx;
			}
		}
	}

	.two-center-two {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 24rpx;
		margin: 20rpx 20rpx 14rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		// width: 100%;

		.lfet {
			background-image: url("https://i.ringzle.com/file/20240124/a2ef2996bd1a420aaa2f6c43415fc450.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 272rpx;
			height: 96rpx;

			.lfet-one {
				font-size: 24rpx;
				color: #666666;
				font-weight: Regular;
				margin-left: 24rpx;
				margin-top: -12rpx;
			}

			.lfet-two {
				margin: 10rpx 20rpx 15rpx;

				.lfet-two-one {
					font-size: 36rpx;
					color: #111111;
					font-weight: Bold;
				}

				.lfet-two-two {
					margin-left: 6rpx;
					font-size: 24rpx;
					color: #999999;
					font-weight: Regular !important;
				}
			}
		}

		.content {
			.content-one {
				height: 20rpx;
			}

			.content-two {
				width: 98rpx;
				height: 48rpx;
				border-radius: 50rpx;
				border: 2rpx solid #efefef;
				text-align: center;
				line-height: 48rpx;
				font-size: 26rpx;
				color: #111111;
				font-weight: Regular;
			}
		}

		.right {
			background-image: url("https://i.ringzle.com/file/20240124/a2ef2996bd1a420aaa2f6c43415fc450.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 272rpx;
			height: 96rpx;

			.right-one {
				margin-left: 24rpx;
				margin-top: -13rpx;
				font-size: 24rpx;
				color: #666666;
				font-weight: Regular;
			}

			.right-two {
				margin: 10rpx 20rpx 15rpx;

				.right-two-one {
					font-size: 36rpx;
					color: #111111;
					font-weight: Bold;
				}

				.right-two-two {
					margin-left: 6rpx;
					font-size: 24rpx;
					color: #999999;
					font-weight: Regular !important;
				}
			}
		}
	}

	// popoup 新增游客弹框
	.addPersonPop {
		.inner {
			padding: 0 24rpx 48rpx;

			.tit {
				font-size: 32rpx;
				color: #333;
				text-align: center;
				margin-bottom: 40rpx;
				margin-top: 64rpx;
			}

			.addPerson {
				height: 88rpx;
				border-radius: 16rpx;
				margin-bottom: 60rpx;
			}

			.checkbox {
				margin-left: -30rpx;
			}

			.title {
				margin-left: 12rpx;

				.top {
					margin-bottom: 12rpx;

					text {
						&:nth-child(1) {
							color: #333;
							font-size: 32rpx;
							margin-right: 20rpx;
							font-weight: 600;
						}

						&:nth-child(2) {
							background-color: #eef0f5;
							border-radius: 8rpx;
							color: #94a9c8;
							font-size: 24rpx;
							padding: 2rpx 12rpx;
						}
					}
				}

				.bottom {
					text {
						&:nth-child(1) {
							color: #aaa;
							font-size: 24rpx;
							margin-right: 8rpx;
						}

						&:nth-child(2) {
							color: #111;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}

	.operation {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 30rpx;
		background-color: #fff;
		height: 112rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 10;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.06);

		.left {
			color: #ff4141;
			margin-top: -28rpx;
			font-size: 24rpx;
			position: relative;

			text {
				vertical-align: middle;
			}

			text:nth-child(1) {
				color: #666;
				margin-right: 16rpx;
			}

			text:nth-child(3) {
				font-size: 48rpx;
			}

			text:nth-child(4) {
				position: absolute;
				font-size: 24rpx;
				color: #aaa;
				bottom: -16rpx;
				left: 0;
			}
		}

		.right {
			display: flex;
			min-width: 200rpx;

			text {
				width: 220rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				border-radius: 40rpx;
				margin-left: 24rpx;
				font-size: 32rpx;
				background-image: #007a69;
			}
		}
	}

	.hander-one {
		background-image: url("https://i.ringzle.com/file/20240129/323bce42369f4d228d5653b8a4249095.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		// height: 420rpx;
		box-sizing: border-box;

		.cardList {
			margin: 30rpx 20rpx 6rpx;
			background-color: #fff;
			// height: 210rpx;
			// width: 100%;
			border-radius: 20rpx;
			padding: 40rpx 30rpx 36rpx;

			.card-title {
				// margin: 12rpx 0;
				display: flex;
				justify-content: space-between;

				.card-title-left {
					font-size: 34rpx;
					color: #111111;
					font-weight: bold;
				}

				.card-title-right {
					display: flex;
					align-items: center;

					.card-title-left-text {
						font-size: 24rpx;
						color: #999999;
						font-weight: Regular;
					}

					.image {
						width: 28rpx;
						height: 28rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.card-text {
				margin: 20rpx 0 16rpx;
				font-size: 24rpx;
				color: #666666;
				font-weight: Regular;
			}

			.card-text-bottom {
				display: flex;
				align-items: center;

				.card-text-bottom-text {
					font-size: 24rpx;
					color: #c9a771;
					font-weight: Regular;
					margin-right: 30prx;
				}

				.image {
					width: 24rpx;
					height: 24rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.topInfo {}

	.addPerson {
		height: 64rpx;
		border: 1rpx dashed #01b9f9;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.chekedPerson {
		display: block;
		width: 100%;
		margin-top: 40rpx;

		.title {
			margin-left: 12rpx;

			.index {
				font-size: 30rpx;
				font-weight: 600;
				margin-right: 40rpx;
				color: #333;
			}

			.top {
				margin-bottom: 8rpx;

				text {
					&:nth-child(2) {
						background-color: #eef0f5;
						border-radius: 8rpx;
						color: #94a9c8;
						font-size: 24rpx;
						padding: 2rpx 12rpx;
					}
				}
			}

			.bottom {
				text {
					color: #aaa;
					font-size: 24rpx;
				}
			}
		}
	}

	.mark {
		margin-bottom: 70rpx;
		color: #ff7d01;
		font-size: 24rpx;

		text:nth-child(2) {
			margin: 0 24rpx;
		}
	}

	.book {
		box-sizing: border-box;
		padding: 24rpx 24rpx 0;
		background: #fff;
		margin: 20rpx 20rpx 24rpx;
		border-radius: 16rpx;
		// background-color: #fff;
		// margin: 20rpx 0;
		// padding: 40rpx 24rpx 47rpx;

		.tit {
			font-size: 36rpx;
			color: #111;
			margin-bottom: 32rpx;
			font-weight: 600;

			text {
				font-size: 24rpx;
				color: #999;
				margin-left: 20rpx;
			}
		}

		.date {
			display: grid;
			grid-template-columns: auto auto auto auto;
			gap: 20rpx;
			margin-bottom: 60rpx;

			.item {
				border-bottom: 1rpx solid #efefef;
				padding: 20rpx 0;
				border: 1rpx solid #007a69;
				font-size: 24rpx;
				text-align: center;
				border-radius: 16rpx;

				text {
					display: block;
					color: #111;

					&:nth-child(2) {
						margin: 8rpx 0;
					}

					&:nth-child(3) {
						color: #007a69;
					}
				}

				&:last-child {
					padding-top: 40rpx;

					text {
						color: #007a69;
					}
				}
			}
		}
	}

	.num {
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #f0f2f5;

		.input {
			margin: 0 30rpx;
			font-size: 36rpx;
			color: #333333;
			font-weight: bold;
		}

		text {
			margin: 20rpx 0;

			&:nth-child(1) {
				font-size: 28rpx;
				color: #111;
				font-weight: 400;
			}

			&:nth-child(3) {
				font-size: 36rpx;
				color: #ff4141;
				margin-right: 40rpx;
			}

			&.icon {
				display: inline-block;
				width: 100rpx;
				flex: 1;
				text-align: right;
				padding-top: 12rpx;
			}
		}
	}

	.minus,
	.plus {
		border-radius: 6rpx;
		// text-align: center;
		width: 44rpx;
		height: 44rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	// .plus {
	// 	background-color: #007A69;
	// 	border-color: #007A69;
	// }

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: calc(100% - 60rpx);
		background: #fff;
		box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
		padding: 16rpx 30rpx 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.b_left {
			display: flex;
			align-items: center;

			&>text {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: Regular;
				color: #666666;
			}

			&>view {
				color: #ff4141;
				display: flex;
				align-items: center;

				.b_span1 {
					display: block;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: Regular;

					margin-left: 16rpx;
				}

				.b_span {
					display: block;
					font-size: 48rpx !important;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #ff4141;
				}
			}
		}

		.b_right {
			display: flex;
			align-items: center;

			.br_left {
				display: flex;
				align-items: center;

				text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				image {
					width: 24rpx;
					height: 24rpx;
					margin-left: 8rpx;
				}
			}

			.br_right {
				width: 220rpx;
				height: 80rpx;
				// background: linear-gradient(90deg, #FF7D43 0%, #FEAC2C 100%);
				background-color: #007a69;
				border-radius: 40rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				margin-left: 24rpx;
			}
		}
	}

	.agree {
		box-sizing: border-box;
		margin: 24rpx 36rpx;
		// display: flex;
		// height: 102rpx;
		align-items: center;
		padding: 51rpx 0 51rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
		}

		text {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}

		text:nth-child(2) {
			color: #c9a771;
			margin-left: 10rpx;
		}
	}

	.details_pay {
		background: #f6f6f6;

		.wechat_pay {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 83rpx;
			background: #ffffff;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			padding: 41rpx 24rpx;

			.wp_left {
				display: flex;
				align-items: center;

				image {
					width: 54rpx;
					height: 54rpx;
				}

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-left: 24rpx;
				}
			}

			&>image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.pay_submit {
			margin-top: 59rpx;
			height: 92rpx;
			background: #007a69;
			border-radius: 46rpx;
			line-height: 92rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			letter-spacing: 2rpx;
		}
	}

	.details {
		padding: 40rpx 30rpx 200rpx;

		.title {
			position: relative;
			text-align: center;

			text {
				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				right: 10rpx;
				top: 50%;
				margin-top: -18rpx;
			}
		}

		.address {
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #333333;
			margin-top: 48rpx;
		}

		.tickets {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 42rpx;

			&>text {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
			}

			&>view {
				font-size: 28rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;

				span {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
				}
			}
		}

		.total {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 61rpx;

			text {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			view,
			view>view {
				// height: 36rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}
		}
	}

	.cellBox {
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 16rpx;
		// padding: 12rpx;
		margin: 24rpx;
		padding: 35rpx 30rpx;
		display: flex;
		justify-content: space-between;

		.cellBox-left {
			display: flex;
			align-items: center;

			.icon {
				border-radius: 6rpx;
				background-color: #ff4141;
				width: 30rpx;
				height: 30rpx;
				color: #fff;
				font-size: 20rpx;
				text-align: center;
				line-height: 30rpx;
				margin-right: 10rpx;
			}

			.title {
				color: #666666;
				font-size: 30rpx;
				font-weight: Regular;
				// margin-left: 260rpx;
			}
		}

		.cellBox-right {
			display: flex;
			width: 70%;
			justify-content: space-between;
			align-items: center;

			.cellBox-text {
				color: #aaaaaa;
				font-size: 28rpx;
				// margin-left: 260rpx;
			}

			.image {
				width: 24rpx;
				height: 24rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.b_right {
		display: flex;
		align-items: center;

		.br_left {
			display: flex;
			align-items: center;

			text {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 8rpx;
			}
		}

		.br_right {
			width: 220rpx;
			height: 80rpx;
			// background: linear-gradient(90deg, #FF7D43 0%, #FEAC2C 100%);
			background-color: #007a69;
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			margin-left: 24rpx;
		}
	}
</style>